<template>
  <div class="my-order">
    <div class="page-title">我的订单</div>
    <div class="tabs">
      <div class="tab-item active"> 全部</div>
      <div class="tab-item"> 待支付</div>
      <div class="tab-item"> 待发货</div>
      <div class="tab-item"> 待收货</div>
      <div class="tab-item"> 待评价</div>
      <div class="tab-item"> 退款/售后</div>
    </div>
    <div class="" style="width: 872px;"><div>
      <div class="oder_item_container">
        <div class="left">
          <div class="item">
            <span>订单号: SC20240325141714155
              <i class="el-icon-copy-document" style="cursor: pointer;"></i>
            </span>
            <span class="statusText">待支付</span>
          </div>
          <div class="item">
            <span>信息：</span>
            <div class="info">
              <span> 1个商品 </span>
              <span> 来自 凌天店铺 </span>
            </div>
          </div>
          <div class="item">
            <span>金额</span>
            <span class="amount"> $34.60 </span>
          </div>
        </div>
        <div class="divider"></div>
        <div class="right">
          <div class="button"> 查看订单 </div>
          <div class="button active"> 立即付款 </div>
          <div class="button"> 取消订单 </div>
        </div>
      <!----><div class="el-dialog__wrapper" style="display: none;">
        <div role="dialog" aria-modal="true" aria-label="查看物流" class="el-dialog logistics-dialog"
          style="margin-top: 15vh;">
          <div class="el-dialog__header">
            <span class="el-dialog__title">查看物流</span>
            <button type="button" aria-label="Close" class="el-dialog__headerbtn">
              <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
          </div><!----><!---->
        </div>
      </div>
        <div class="el-dialog__wrapper" style="display: none;">
          <div role="dialog" class="el-dialog__header">
            <span class="el-dialog__title">待付款</span>
            <button type="button" class="el-dialog__headerbtn">
              <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
          </div><!----><!---->
        </div>
      </div>
      <div class="el-dialog__wrapper" style="display: none;">
        <div role="dialog" class="el-dialog__header">
          <span class="el-dialog__title">取消订单</span>
          <button type="button" class="el-dialog__headerbtn">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div><!---->
        <div class="el-dialog__footer">
          <button type="button" class="el-button el-button--primary el-button--mini"><!---->
        <!----><span> 确认 </span>
          </button>
          <button type="button" class="el-button el-button--default el-button--mini is-plain"><!---->
        <!----><span> 取消 </span>
          </button>
        </div>
      </div>
    </div>
      <div class="el-loading-mask" style="display: none;">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg><!---->
        </div>
      </div>
    </div>
    <div class="common-pagination">
      <div class="es-pagination el-pagination is-background">
        <button type="button" disabled="disabled" class="btn-prev"><i class="el-icon el-icon-arrow-left"></i></button>
        <ul class="el-pager">
          <li class="number active">1</li><!----><!----><!----></ul>
        <button type="button" disabled="disabled" class="btn-next"><i class="el-icon el-icon-arrow-right"></i></button>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style scoped>
.my-order{
  margin-top: 32px;
  margin-left: 50px;
  flex: 1
}

.my-order .tabs{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  border-radius: 4px;
  width: 100%
}

.my-order .tabs .tab-item{
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0 20px;
  background-color: #eee;
  border-radius: 5px;
  color: #999
}

.my-order .tabs .tab-item.active{
  background-color: var(--color-main);
  color: #fff
}

.my-order .order-list.option-list .option-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 10px 0
}

.my-order .order-list.option-list .option-item+.option-item {
  border-top: 1px solid #eee
}

.my-order .order-list.option-list .option-item.block {
  display: block
}

.my-order .order-list.option-list .option-item.block .value {
  flex: inherit;
  max-width: 100%;
  text-align: left
}

.my-order .order-list.option-list .option-item .label {
  flex: 1;
  font-size: 14px;
  color: #333
}

.my-order .order-list.option-list .option-item .value {
  flex: 2;
  max-width: 300px;
  font-size: 14px;
  color: #666;
  text-align: right
}

.my-order .order-list.option-list .option-item .value .text {
  font-weight: 600;
  font-size: 14px;
  color: #000
}

.my-order .order-list.option-list .option-item .value .desc {
  font-weight: 500;
  font-size: 12px;
  color: #999;
  margin-top: 4px
}

.my-order .order-list.option-list .option-item .value .price {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-price)
}

.my-order .order-list.option-list .option-item .value .detail-link {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-main);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.my-order .order-list.option-list .option-item .value .product-item {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 15px
}

.my-order .order-list.option-list .option-item .value .product-item img {
  width: 62px;
  height: 62px
}

.my-order .order-list.option-list .option-item .value .product-item .title {
  flex: 1;
  margin-left: 18px;
  font-weight: 400;
  font-size: 14px
}

.my-order .order-list.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.my-order .order-list.actions>*+* {
  margin-left: 16px
}

.my-order .order-list.actions .status {
  text-align: right
}

.my-order .order-list.actions .status.unReturn {
  color: #999
}

.my-order .order-list.actions .status.running {
  color: var(--color-main)
}

.my-order .order-list.actions .status.success {
  color: #32aa15
}

.my-order .order-list.actions .status.fail {
  color: #e10015
}
.oder_item_container{
  display: flex;
  flex-direction: row;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 17px;
  width: 872px;
  align-items: center;
  padding: 13px;
  position: relative;
}
.oder_item_container .left{
  display: flex;
  flex-direction: column;
  width: 100%;
  font-weight: 400;
  font-size: 12px
}

.oder_item_container .left .item{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px
}

.oder_item_container .left .item .statusText{
  color: #c21818
}

.oder_item_container .left .item .info{
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

.oder_item_container .left .item .amount{
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--color-price)
}

.oder_item_container .right{
  width: 407px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative
}

.oder_item_container .button{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  height: 28px;
  border: 1px solid #8c8c8c;
  border-radius: 14px;
  color: #333;
  margin-right: 13px;
  cursor: pointer;
  margin-top: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.oder_item_container .button.active{
  color: var(--color-main);
  border: 1px solid var(--color-main);
  background: linear-gradient(0deg,#fff7ec,#fff7ec),#eee
}
.oder_item_container .divider{
  border-left: 1px solid #eee;
  height: 92px;
  margin-right: 50px;
  margin-left: 50px;
}
</style>